<template>
  <el-container class="hello">
    <el-aside width="initial">
      <my-sidebar></my-sidebar>
    </el-aside>
    <el-container>
      <el-header class="header">
        <my-header></my-header>
      </el-header>
      <el-main>
        <transition name="move" mode="out-in">
          <router-view></router-view>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import mySidebar from "../common/Sidebar";
import myHeader from "../common/Header";

export default {
  name: "HelloWorld",
  props: ["id"],
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      sidebarData: [
        { id: 1, icon: "el-icon-menu", name: "首页", url: "/index/runInfo" },
        {
          id: 2,
          icon: "el-icon-menu",
          name: "管理",
          children: [
            {
              id: 3,
              icon: "el-icon-menu",
              name: "运行信息",
              url: "/index/runInfo"
            },
            {
              id: 4,
              icon: "el-icon-menu",
              name: "地锁管理",
              url: "/index/parkLock"
            },
            {
              id: 5,
              icon: "el-icon-menu",
              name: "首页",
              url: "/index/runInfo"
            },
            {
              id: 6,
              icon: "el-icon-menu",
              name: "首页",
              url: "/index/runInfo"
            }
          ]
        },
        {
          id: 7,
          icon: "el-icon-menu",
          name: "管理",
          children: [
            {
              id: 8,
              icon: "el-icon-menu",
              name: "运行信息",
              url: "/index/runInfo"
            },
            {
              id: 9,
              icon: "el-icon-menu",
              name: "地锁管理",
              url: "/index/parkLock"
            },
            {
              id: 10,
              icon: "el-icon-menu",
              name: "首页",
              url: "/index/runInfo"
            },
            {
              id: 11,
              icon: "el-icon-menu",
              name: "首页",
              url: "/index/runInfo"
            }
          ]
        }
      ]
    };
  },
  computed: { 
  },
  methods: {},
  mounted: function() {
    this.$nextTick(function() {
      this.$store.dispatch("loadCatalog", this.id);
      this.$store.dispatch("loadPower", this.id);
      this.$store.commit("reflashState");
    });
  },
  components: {
    mySidebar,
    myHeader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  background: white;
  box-shadow: 0px 2px 5px #888888;
}

.hello {
  height: 100%;
  background: #f0f2f5;
}

.content {
  height: calc(95%);
}
</style>
